<template>
  <div class="box">
    <div class="title">
      <el-button type="primary" @click="onApprove">审批</el-button>
      <h2>{{ title }}</h2>
    </div>
    <el-table :data="tableData" border stripe style="width: 100%" :height="tableHeight">
      <el-table-column prop="classname" label="分类" min-width="100" align="center" />
      <el-table-column prop="proname" label="任务标题" min-width="180" />
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="tasknote" label="工作举措" min-width="300">
        <template slot-scope="scope">
          <div v-html="scope.row.tasknote"></div>
        </template>
      </el-table-column>

      <el-table-column prop="standstr" label="完成标准" min-width="500">
        <template slot-scope="scope">
          <div v-html="scope.row.standstr"></div>
        </template>
      </el-table-column>
      <el-table-column prop="objectivearr" label="预期标志性成果" min-width="300">
        <template slot-scope="scope">
          <div v-html="scope.row.objectivearr"></div>
        </template>
      </el-table-column>
      <el-table-column prop="enddatearr" label="要求完成时间" min-width="120" align="center">
        <template slot-scope="scope">
          <div v-html="scope.row.enddatearr"></div>
        </template>
      </el-table-column>
      <el-table-column prop="workdpnamearr" label="责任部门" min-width="180" align="center">
        <template slot-scope="scope">
          <div v-html="scope.row.workdpnamearr"></div>
        </template>
      </el-table-column>
    </el-table>
    <h3>历史审批记录</h3>
    <el-table :data="historyData" border stripe style="width: 100%">
      <el-table-column prop="checkdis" label="审批节点" width="180" />
      <el-table-column prop="checkdatetime" align="center" label="审批时间" width="180" />
      <el-table-column prop="checkusername" label="审批人" width="180" />
      <el-table-column prop="checktypestr" label="状态" width="150" />
      <el-table-column prop="note" label="说明">
        <template slot-scope="scope">
          <div v-html="scope.row.note"></div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ProTaskList } from '@/api/task/index'
import { ExamHistoryget } from '@/api/Approval/index'
export default {
  data() {
    return {
      tableData: [],
      tableHeight: '',
      historyData: [],
      historyid: '',
      title: '',
      id: '',
      loguserid: this.$store.getters.userInfo.id,
      logorgid: this.$store.getters.userInfo.orgid
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(newId) {
        if (newId.path == '/Fourth/EmployeeHome/type1') {
          this.id = this.$route.query.id
          this.onSearch()
        }
      }
    },
    // '$route.query.id': {
    //   immediate: true,
    //   handler(newId) {
    //     this.id = newId
    //     if (this.id != undefined) {
    //       this.onSearch()
    //     }
    //   }
    // },
    '$route.query.title': {
      immediate: true,
      handler(newId) {
        this.title = newId
      }
    },
    '$route.query.historyid': {
      immediate: true,
      handler(newId) {
        this.historyid = newId
      }
    },
    '$store.getters.approveIClose': {
      immediate: false,
      handler(newId) {
        if (newId == true && this.$route.path == '/Fourth/EmployeeHome/type1') {
          console.log(1)
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.go(-1)
        }
      }
    }
  },
  created() {
    // 100是表格外其它布局占的高度，这个数值根据自己实际情况修改
    this.tableHeight = window.innerHeight - 180
    this.onSearch()
  },
  methods: {
    onApprove() {
      this.$ApproveInsert({
        visible: true,
        title: this.title,
        documentid: this.id,
        historyid: this.historyid,
        modelcode: 'DBProject'
      })
    },
    async onSearch() {
      const data = {
        proid: this.id,
        loguserid: this.loguserid,
        logorgid: this.logorgid
      }
      const { content } = await ProTaskList(data)
      if (content != null) {
        content.forEach(item => {
          if (item.tasknote != null) {
            item.tasknote = item.tasknote.replace(/\\n/g, '<br/>')
            item.tasknote = item.tasknote.replace(/\n/g, '<br/>')
          }

          if (item.standstr != null) {
            item.standstr = item.standstr.replace(/\\n/g, '<br/>')
            item.standstr = item.standstr.replace(/\n/g, '<br/>')
          }

          if (item.enddatearr != null) {
            item.enddatearr = item.enddatearr.replace(/\\n/g, '<br/>')
            item.enddatearr = item.enddatearr.replace(/\n/g, '<br/>')
          }

          if (item.objectivearr != null) {
            item.objectivearr = item.objectivearr.replace(/\\n/g, '<br/>')
            item.objectivearr = item.objectivearr.replace(/\n/g, '<br/>')
          }

          if (item.workdpnamearr != null) {
            item.workdpnamearr = item.workdpnamearr.replace(/\\n/g, '<br/>')
            item.workdpnamearr = item.workdpnamearr.replace(/\n/g, '<br/>')
          }
        })
      }

      this.tableData = content
      const res = await ExamHistoryget({ modelcode: 'DBProject', documentid: this.id })
      res.content.forEach(item => {
        if (item.note != null) {
          item.note = item.note.replace(/\\n/g, '<br/>')
          item.note = item.note.replace(/\n/g, '<br/>')
        }
      })
      this.historyData = res.content
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
  position: relative;
}

.el-card {
  background-color: transparent;
}

.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.title {
  display: flex;
  padding-bottom: 20px;
}
h2 {
  margin: 0 auto;
}

#todo-col {
  padding: 0 20px 20px 0;
}
#Fill-col {
  padding: 10px 20px 0 0;
}
#todo-task {
  padding: 0 20px 20px 0;
}
#Fill-Echart {
  padding: 10px 20px 0 0;
}

.task-card {
  overflow: auto;
  height: 310px;
}
.task-div {
  padding-bottom: 15px;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
.red {
  background: lightyellow;
}
</style>
